<template>
	<view class="setting_wrapper">
		<view class="setting_item" @click="GotoChangePhone">
			<label class="name">手机号</label>
			<view class="result">{{tel}}<i class="iconfont icon-arrow-right"></i></view>
		</view>
		<button class="logout" @click="quitLogin">退出登录</button>
		<u-modal @confirm="confirm" @cancel="cancel" :show="settingLayer.show" :title="settingLayer.title" :content='settingLayer.content' :show-cancel-button="true"></u-modal>
	</view>
</template>

<script>	
	import { api_getUserPhone } from '@/api/api'
	import storage from '@/utils/storage.js'
	export default {		
		data() {
			return {
				tel: '',
				settingLayer: {
					show: false,
					title: '确定要退出吗',
					content: '退出后将需要重新登录'
				}
			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			init(){	// 初始化				
				api_getUserPhone().then(res => {				
					if (res.code == 1) {
						this.tel = res.data;
					} else {
						uni.showToast({ title: res.msg,icon: 'error' });
					}
				}).catch(err => {					
					console.log(err);
				})
			},
			GotoChangePhone(){	// 改变手机号
				uni.navigateTo({ url: `/pages/edit_phone/index?phone=${this.tel}`})
			},
			quitLogin(){	// 退出登录
				this.settingLayer.show = true;
			},
			confirm(){
				storage.clear();
				this.settingLayer.show = false;
				uni.redirectTo({ url: '/pages/my/index' });
			},
			cancel(){
				this.settingLayer.show = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
.setting_wrapper{
	height: calc(100vh - 100px);
	padding: 0 20px;
	box-sizing: border-box;
	position: relative;
	.setting_item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #ebedf0;
		box-sizing: border-box;
		padding: 15px 0;
		color: #969799;
		.name{
			font-size: 14px;
			color: #333;
		}
		.result{
			font-size: 14px;
			.iconfont{
				float: right;
				margin: 0 0 0 10px;
			}
		}
	}
	.logout{
		display: block;
		width: 120px;
		background-color: #07c160;
		font-size: 14px;
		color: #fff;
		position: absolute;
		left: 50%;
		bottom: 30px;
		transform: translate(-50%,0);
		&::after{
			border: none;
		}
	}
}
</style>
